<script setup>
import { ref, onMounted, toRefs } from 'vue'
import {unit2} from '../unit.js'
import link from '../link.js'

defineProps({
    config: Object,
});



</script>

<template>

<button class="button" :style="{
    fontSize: unit2(config?.fontSize),
    color: config?.color,
    backgroundColor: config?.backgroundColor,
    borderRadius: unit2(config?.borderRadius),
    boxShadow: 'inset 0 0 0 '+unit2(config?.borderWidth)+' '+config?.borderColor,
}" @click="link(config?.link)">{{ config?.name }}</button>

</template>

<style scoped>
    .button{
        width: 100%;margin: 0 auto;line-height: 2.7;text-align: center;cursor: pointer;
        padding: 0; border: none;
    }
    .button:active{transform: scale(0.96)}
</style>